<template>
  <div>
    <div class="b-title m-0">电瓶在柜情况</div>
    <div class="p-24">
      <div class="mb-xs flex">
        在库数量：
        <el-progress
          style="flex: 1"
          :stroke-width="height"
          :percentage="info?.pct?.inStockCount ?? 0"
          status="success"
        >
          <span class="font-bold font-20 inline-block b-progress-text">
            {{ info?.inStockCount ?? 0 }}</span
          >
        </el-progress>
      </div>
      <div class="mb-xs flex">
        借出数量：
        <el-progress
          style="flex: 1"
          :stroke-width="height"
          :percentage="info?.pct?.lendCount ?? 0"
          status="exception"
        >
          <span class="font-bold font-20 inline-block b-progress-text">{{
            info?.lendCount ?? 0
          }}</span>
        </el-progress>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { realWH } from "@/utils";
/* 数据 */
const props = defineProps({
  data: {
    default: () => [] as any
  }
});

const info = computed(() => {
  let inStockCount = 0;
  let lendCount = 0;
  props.data.map((item: any) => {
    inStockCount += Number(item.batteryLendCount ?? 0);
    lendCount += Number(item.batteryInInventoryCount ?? 0);
  });
  return getPercentage({ inStockCount, lendCount });
});
/* 获取工具在柜情况百分比 */
const getPercentage = data => {
  let inStockCount = data?.inStockCount ?? 0;
  let lendCount = data?.lendCount ?? 0;

  let max = Math.max(inStockCount, lendCount);

  // 最大区间值
  let maxLen = String(max).length;
  let dm = Number(`1${"0".repeat(maxLen)}`);

  let num1 = parseFloat((inStockCount / dm) * 100);
  let num2 = parseFloat((lendCount / dm) * 100);
  const pct = {
    inStockCount: num1,
    lendCount: num2
  };
  return { ...data, pct };
};
/* 高度 */
const height = realWH(20).h;
</script>

<style lang="scss" scoped>
::v-deep(.el-progress-bar__outer) {
  background-color: rgb(31, 42, 116);
  height: 1.5vh !important;
}
</style>
